import React, { useState, useEffect } from 'react'
import Tabs from '@/components/Tabs'
import { View, Text } from '@tarojs/components'
import OnlineRecordCard from '@/components/PublicCard/OnlineRecordCard'
import { fetchListUserOfflineQa, fetchListUserQa } from '@/server/shop'
import Taro, { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import Empty from '@/components/Empty'
import './index.scss'
const QaRecord = (props) => {
    const [status, setStatus] = useState('0')
    const [listMap, setList] = useState([])
    const [page, setPage] = useState({
        page: 1, limit: 20
    })
    const statusList = [{
        label: '待回复',
        value: '0',

    }, {
        label: '已回复',
        value: '1'
    },
    {
        label: '待评价',
        value: '3'
    },
    {
        label: '已评价',
        value: '4'
    },
    ]


    const fetchData = () => {
        fetchListUserQa({
            ...page,
            status,
        }).then(val => {
            const { userQaList = [] } = val
            setList([...listMap, ...userQaList])
        })
    }
    const pageUp = () => {
        setPage({
            ...page,
            page: page.page + 1
        })
    }

    useEffect(() => {
        fetchData()
    }, [page])
    useEffect(() => {
        setPage(() => {
            setList([])
            return {
                ...page,
                page: 1
            }
        })
    }, [status])
    useReachBottom(() => {
        pageUp()
    })
    return <View className='QaRecord_box'>
        <View className='QaRecord_info'>
            <View className='QaRecord_Box'>
                <View className='QaRecord_qh'>
                    <View className='QaRecord_tags_box'>
                        {statusList.map((item, index) => {
                            const { value, label } = item
                            return <View onClick={() => {
                                if (status !== value) {
                                    setStatus(value)
                                }

                            }} className={`QaRecord_tags ${value === status ? 'QaRecord_tags1' : ''}`}>{label}</View>
                        })}
                    </View>
                </View>
                <Empty list={listMap}>
                    <View className='QaRecord_padding'>
                        {listMap.map(val => {
                            return <OnlineRecordCard data={val}></OnlineRecordCard>
                        })}
                    </View>
                </Empty>
            </View>
        </View>
    </View>


}
export default QaRecord